<template>
	<view>
		<view 
		class="fixed-bottom mx-2 mb-1 rounded" 
		style="height: 160rpx;background-color: #D1CCC0;opacity: .9;"
		@click="toDetailPage">
			<!-- 进度部分 -->
			<!-- @xxx.stop  阻止冒泡 -->
			<view class="flex align-center justify-center" style="color: #7a8388;" @click.stop>
				<!-- 总时长 -->
				<view>{{ durationTime | formatTime }}</view>
				<!-- 进度条 -->
				<view style="width: 500rpx;">
					<slider 
					block-size="16" 
					activeColor="#e48267" 
					backgroundColor="#eef2f3"
					:value="currentTime"
					:max="durationTime"
					@change="sliderToPlay"
					@changing="sliderToPlay"
					/>
				</view>
				<!-- 当前播放时间 -->
				<view>{{ currentTime | formatTime }}</view>
			</view>
			
			<!-- 音频控制部分 -->
			<view 
			class="flex align-center justify-between mx-2" 
			style="height: 70rpx;">
				<!-- 音频相关信息 -->
				<view class="font" style="color: #424651;">
					<view>歌手-{{singerName}}</view>
					<view>歌曲-{{audioName}}</view>
				</view>
				<!-- 音频按钮部分 -->
				<view class="flex align-center" @click.stop>
					<view class="animated" hover-class="pulse">
						<my-icon iconId="icon-shangyishou" iconSize="75" @click.native="preOrNext('pre')" />
					</view>
					<my-icon :iconId="playStatus ? 'icon-bofang' : 'icon-ziyuan'" iconSize="75" class="mx-2" @click.native="playOrPause"/>
					<view class="animated" hover-class="pulse">
						<my-icon iconId="icon-xiayishou" iconSize="75"  @click.native="preOrNext('next')" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	import unit from '../common/unit.js';
	export default {
		name:"myaudio",
		data() {
			return {
				
			};
		},
		filters:{
			...unit
		},
		computed:{
			...mapState({
				playStatus: ({ audio }) => audio.playStatus,
				durationTime: ({ audio }) => audio.durationTime,
				currentTime: ({ audio }) => audio.currentTime
			}),
			...mapGetters(['audioName','singerName'])
		},
		methods:{
			...mapMutations([ 'destruction' ]),
			...mapActions([ 'init', 'playOrPause', 'preOrNext','sliderToPlay' ]),
			// 跳转音乐详情页
			toDetailPage(){
				uni.navigateTo({
					url: '/pages/musicDetail/musicDetail'
				})
				
			}
		},
		mounted(){
			this.init();
		},
		destroyed(){
			this.destruction();
		}
	}
</script>

<style>

</style>
